<template>
	<div class="landlord-center">
		<div class="left-menu">
			<!-- 左侧菜单 -->
			<ul>
				<li
					v-for="(item, index) in menuItems"
					:key="index"
					:class="['menu-item', { active: activeItem === item.key }]"
					@click="navigateTo(item.key)"
				>
					{{ item.label }}
				</li>
			</ul>
		</div>

		<div class="right-content">
			<!-- 个人信息部分：只有当路径为 '/landlord-center' 时才显示 -->
			<div v-if="isPersonalInfoPage">
				<LandlordInfo />
			</div>

			<!-- 其他页面通过 router-view 加载 -->
			<router-view v-if="!isPersonalInfoPage"></router-view>
		</div>
	</div>
</template>

<script>
	import LandlordInfo from '@/views/landlord/LandlordInfo.vue';

	export default {
		name: 'LandlordCenter',
		components: {
			LandlordInfo
		},
		data() {
			return {
				activeItem: '', // 绑定当前选中的菜单项
				menuItems: [
					{ key: 'user-info', label: '个人信息' },
					{ key: 'my-house', label: '我的房源' },
					{ key: 'upload-house', label: '上传房源' },
					{ key: 'audit-reservation', label: '我的预约' },
					{ key: 'my-schedule', label: '我的档期' },
					{ key: 'modify-pass', label: '修改密码' },
				]
			};
		},
		computed: {
			// 判断当前是否为个人信息页面
			isPersonalInfoPage() {
				return this.$route.path === '/landlord-center';
			}
		},
		methods: {
			// 路由跳转，点击菜单时更新 activeItem
			navigateTo(page) {
				this.activeItem = page;
				if (page === 'user-info') {
					this.$router.replace('/landlord-center'); // 个人信息不改变路径
				} else {
					this.$router.push(`/landlord-center/${page}`);
				}
			},
			// 根据当前路径获取菜单 key
			getMenuKeyByRoute(path) {
				if (path === '/landlord-center') return 'user-info';
				const matchedItem = this.menuItems.find((item) => path.includes(item.key));
				return matchedItem ? matchedItem.key : 'user-info';
			}
		},
		created() {
			// 确保初始化时 `activeItem` 正确
			this.activeItem = this.getMenuKeyByRoute(this.$route.path);
		}
	};
</script>

<style scoped>
	.landlord-center {
		display: flex;
		height:88vh;
		max-width: 1200px;
		margin: 0 auto;
		padding: 15px;
		background-color: #fff;
	}

	.left-menu {
		width: 20%;
		background-color: #f4f4f4;
		border-left: 1px solid #ccc;
		border-top: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
	}

	ul {
		list-style-type: none;
		padding: 0;
		margin: 0;
	}

	.menu-item {
		padding: 10px;
		cursor: pointer;
		transition:
			background-color 0.3s,
			color 0.3s;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		color: #737373;
		font-size: 15px;
	}

	.menu-item:hover {
		background-color: #ddd;
		color: #000000;
	}

	.menu-item.active {
		background-color: #3399cc;
		color: white;
	}

	.right-content {
		width: 80%;
		max-height: 88vh;
		flex-grow: 1;
		background-color: #fff;
		border: 1px solid #ccc;
		overflow-y: auto;
	}
</style>
